import { defineComponent, Teleport, ref } from "vue";
import styles from "./ExamplePopup.module.less";
import LIcon from "@/components/public/lIcon/lIcon";

export default defineComponent({
  setup(props, { expose }) {
    const state = ref({
      isShow: false,
    })
    const open = () => {
      state.value.isShow = true;
    }
    expose({
      open,
    })
    return () => (
      state.value.isShow && <div class={styles['example-popup-floating']}>
        <div class={styles['expample-popup-card']}>
          <div class={styles['card-header']}>
            <div class={styles['delete-box']} onClick={() => { state.value.isShow = false }}>
              <LIcon type="icon-delete-x" class={styles['delete-icon']} />
            </div>
          </div>
          <div class={styles['card-container']}>
            <img src="https://www.chinatourins.com/static/images/invoiceMessage.png" />
          </div>
        </div>
      </div>
    )
  }
})